<template>
  <div class="bg-gray-200">
    <mheader />
    <div class="center" @click="isHuiFu = false">
      <div class="main bg-white box-border">
        <div class="box-border grid grid-cols-8 mx-4 mb-4 h-72 w-full">
          <div class="col-span-2 py-4 px-8 h-full w-full">
            <div class="bg-slate-200 w-full h-full">
              <img
                style="width: 100%; height: 255px"
                :src="'http://localhost:8181/' + comicInfo.cover"
              />
            </div>
          </div>
          <div class="col-span-6 h-full w-full mt-4 ml-4">
            <div class="text-xl font-medium">{{ comicInfo.comicName }}</div>
            <div class="text-sm text-gray-500 mt-4">
              作者：{{ comicInfo.author }}
            </div>
            <div class="text-xs text-gray-400 mt-4 flex items-center">
              <svg
                viewBox="0 0 1024 1024"
                xmlns="http://www.w3.org/2000/svg"
                data-v-ea893728=""
                style="width: 1em; height: 1em; margin-right: 8px"
              >
                <path
                  fill="currentColor"
                  d="M224 704h576V318.336L552.512 115.84a64 64 0 0 0-81.024 0L224 318.336V704zm0 64v128h576V768H224zM593.024 66.304l259.2 212.096A32 32 0 0 1 864 303.168V928a32 32 0 0 1-32 32H192a32 32 0 0 1-32-32V303.168a32 32 0 0 1 11.712-24.768l259.2-212.096a128 128 0 0 1 162.112 0z"
                ></path>
                <path
                  fill="currentColor"
                  d="M512 448a64 64 0 1 0 0-128 64 64 0 0 0 0 128zm0 64a128 128 0 1 1 0-256 128 128 0 0 1 0 256z"
                ></path>
              </svg>
              {{ comicInfo.type }}
            </div>
            <div class="text-xs text-gray-400 mt-3 flex items-center">
              <!-- <svg
                style="width: 1em; height: 1em; margin-right: 8px"
                viewBox="0 0 1024 1024"
                xmlns="http://www.w3.org/2000/svg"
                data-v-ea893728=""
              >
                <path
                  fill="currentColor"
                  d="M778.752 788.224a382.464 382.464 0 0 0 116.032-245.632 256.512 256.512 0 0 0-241.728-13.952 762.88 762.88 0 0 1 125.696 259.584zm-55.04 44.224a699.648 699.648 0 0 0-125.056-269.632 256.128 256.128 0 0 0-56.064 331.968 382.72 382.72 0 0 0 181.12-62.336zm-254.08 61.248A320.128 320.128 0 0 1 557.76 513.6a715.84 715.84 0 0 0-48.192-48.128 320.128 320.128 0 0 1-379.264 88.384 382.4 382.4 0 0 0 110.144 229.696 382.4 382.4 0 0 0 229.184 110.08zM129.28 481.088a256.128 256.128 0 0 0 331.072-56.448 699.648 699.648 0 0 0-268.8-124.352 382.656 382.656 0 0 0-62.272 180.8zm106.56-235.84a762.88 762.88 0 0 1 258.688 125.056 256.512 256.512 0 0 0-13.44-241.088A382.464 382.464 0 0 0 235.84 245.248zm318.08-114.944c40.576 89.536 37.76 193.92-8.448 281.344a779.84 779.84 0 0 1 66.176 66.112 320.832 320.832 0 0 1 282.112-8.128 382.4 382.4 0 0 0-110.144-229.12 382.4 382.4 0 0 0-229.632-110.208zM828.8 828.8a448 448 0 1 1-633.6-633.6 448 448 0 0 1 633.6 633.6z"
                ></path>
              </svg> -->
            </div>
            <div class="text-sm text-gray-500 mt-3 h-12 w-4/5">
              {{ comicInfo.introduce }}
            </div>
            <div class="mt-12">
              <el-button
                type="primary"
                size="large"
                @click="pushRead(comicInfo)"
                >开始阅读 第 1 话</el-button
              >
              <el-button
                class="ml-8"
                :icon="comicInfo.isCollect ? StarFilled : Star"
                size="large"
                @click="!comicInfo.isCollect ? sc() : qxsc()"
                >追漫</el-button
              >
              <el-button
                class="ml-8"
                :icon="Pointer"
                size="large"
                @click="!comicInfo.isLike ? dz() : qxdz()"
                >点赞</el-button
              >
            </div>
          </div>
        </div>
        <div class="h-2 bg-gray-200 w-full"></div>
        <div class="grid grid-cols-6 bg-gray-200">
          <div class="p-4 col-span-4 bg-white text-sm min-h-screen">
            <div class="text-2xl mb-3">章节列表</div>
            <div class="mb-3">
              <div
                class="center w-28 p-2 rounded-full bg-blue-100 text-blue-500"
              >
                1-50
              </div>
            </div>
            <div class="grid grid-cols-4 gap-4">
              <div
                v-for="(item, index) in chapterList"
                :key="index"
                class="hover:bg-blue-100 cursor-pointer flex p-2 items-center border border-solid border-gray-200 rounded-sm"
                @click="see(item)"
              >
                <span>{{ index + 1 }}</span>
                <span class="ml-2"
                  >第{{ index + 1 }}话({{ item.chapterName }})</span
                >
              </div>
            </div>
            <div class="text-2xl my-4">评论</div>
            <div class="flex items-center">
              <el-avatar
                class="avatar mr-4"
                :src="'http://localhost:8181' + form.avatar"
              ></el-avatar>
              <el-input
                v-model="textarea"
                :rows="2"
                type="textarea"
                placeholder="发一条友善的评论"
              />
              <el-button
                class="ml-4"
                size="large"
                type="primary"
                @click="addComicComment"
                >发表</el-button
              >
            </div>
            <el-divider />
            <div v-for="item in commentList" :key="item.comment.id">
              <div class="flex items-center">
                <el-avatar
                  class="avatar mr-4"
                  :src="'http://localhost:8181' + item.comment.avatar"
                ></el-avatar>
                <div class="h-full w-full">
                  <div>{{ item.comment.name }}</div>
                  <div class="flex justify-between w-full">
                    <div class="text-xs text-gray-500">
                      {{ item.comment.detail }}
                    </div>
                    <div class="text-xs text-gray-500">
                      {{ item.comment.time }}
                    </div>
                  </div>
                  <div
                    v-if="form.username == item.comment.username"
                    class="float-right mx-2 cursor-pointer"
                  >
                    <el-popconfirm
                      title="你确定要删除这条评论吗？"
                      @confirm="deleteComment(item.comment.id)"
                    >
                      <template #reference>
                        <span>删除</span>
                      </template>
                    </el-popconfirm>
                  </div>
                  <div
                    v-else
                    class="float-right mx-2 cursor-pointer"
                    @click.stop="reply(item)"
                  >
                    回复
                  </div>
                </div>
              </div>
              <div
                v-for="itemChild in item.child"
                :key="itemChild.id"
                class="flex items-center pl-4"
              >
                <el-avatar
                  class="avatar mr-4"
                  :src="'http://localhost:8181' + itemChild.avatar"
                ></el-avatar>
                <div class="h-full w-full">
                  <div>{{ itemChild.name + "@" + itemChild.replyName }}</div>
                  <div class="flex justify-between w-full">
                    <div class="text-xs text-gray-500">
                      {{ itemChild.detail }}
                    </div>
                    <div class="text-xs text-gray-500">
                      {{ itemChild.time }}
                    </div>
                  </div>
                  <div
                    v-if="form.username == itemChild.username"
                    class="float-right mx-2 cursor-pointer"
                  >
                    <el-popconfirm
                      title="你确定要删除这条评论吗？"
                      @confirm="deleteComment(itemChild.id)"
                    >
                      <template #reference>
                        <span>删除</span>
                      </template>
                    </el-popconfirm>
                  </div>
                  <div
                    v-else
                    class="float-right mx-2 cursor-pointer"
                    @click.stop="reply(item, itemChild)"
                  >
                    回复
                  </div>
                </div>
              </div>
              <el-divider style="margin-top: 0" />
            </div>
            <el-empty v-if="commentList.length == 0" description="评论为空" />
          </div>
          <div
            class="border-l-8 p-4 border-solid border-gray-200 col-span-2 bg-white"
            style="height: 344px"
          >
            <div class="text-2xl">推荐漫画</div>
            <div
              v-for="item in homeList"
              :key="item.id"
              class="grid grid-cols-3 my-2"
            >
              <div class="col-span-1 bg-slate-300 h-32">
                <img
                  class="w-full h-full"
                  :src="'http://localhost:8181/' + item.cover"
                  alt=""
                />
              </div>
              <div class="col-span-2">
                <div class="cursor-pointer" @click="pushDetail(item)">
                  {{ item.name }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="isHuiFu" class="center_fixed flex justify-center items-center">
      <div class="flex items-center w-1/2 bg-white">
        <el-avatar
          class="avatar mr-4"
          :src="'http://localhost:8181' + form.avatar"
        ></el-avatar>
        <el-input
          v-model="textareaReply"
          :rows="2"
          type="textarea"
          :placeholder="'回复' + selectItem.comment.name"
        />
        <el-button
          class="ml-4"
          size="large"
          type="primary"
          @click="addComicCommentReply"
          >发表</el-button
        >
      </div>
    </div>
  </div>
</template>
<script>
import mheader from "@/components/home-header.vue";
import { Star, StarFilled, Pointer } from "@element-plus/icons-vue";
import request from "@/axios/http";
import { ElMessage } from "element-plus";
export default {
  name: "detail",
  data() {
    return {
      Star,
      StarFilled,
      Pointer,
      form: JSON.parse(sessionStorage.getItem("user"))
        ? JSON.parse(sessionStorage.getItem("user"))
        : { username: "test" },
      comicInfo: {},
      chapterList: [],
      commentList: [],
      homeList: [],
      textarea: "",
      textareaReply: "",
      isHuiFu: false,
      selectItem: {},
    };
  },
  components: {
    mheader,
  },
  methods: {
    pushRead() {
      this.$router.push({
        path: "read",
        query: { name: this.comicInfo.comicName, chapterNumber: 1 },
      });
    },
    getComicInfo() {
      return request({
        url: "joint/getComicInfo",
        method: "post",
        isFile: true,
        data: {
          username: this.form.username,
          comicId: this.$route.query.id,
        },
      }).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.comicInfo = res.data;
          return Promise.resolve();
        }
        return Promise.reject();
      });
    },
    // 收藏
    sc() {
      request({
        url: "collect/addCollect",
        method: "post",
        data: {
          username: this.form.username,
          comicId: this.$route.query.id,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.comicInfo.isCollect = true;
          ElMessage.success("收藏成功");
        }
      });
    },
    // 取消收藏
    qxsc() {
      request({
        url: "collect/deleteCollect",
        method: "post",
        data: {
          username: this.form.username,
          comicId: this.$route.query.id,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.comicInfo.isCollect = false;
          ElMessage.success("取消收藏成功");
        }
      });
    },
    // 点赞
    dz() {
      request({
        url: "likes/addLike",
        method: "post",
        data: {
          username: this.form.username,
          comicId: this.$route.query.id,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.comicInfo.isLike = true;
          ElMessage.success("点赞成功");
        }
      });
    },
    // 取消点赞
    qxdz() {
      request({
        url: "likes/deleteLike",
        method: "post",
        data: {
          username: this.form.username,
          comicId: this.$route.query.id,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.comicInfo.isLike = false;
          ElMessage.success("取消点赞成功");
        }
      });
    },
    // 获取章节
    getZJ() {
      request({
        url: "chapter/selectChapter",
        method: "post",
        data: {
          pageNum: 1,
          pageSize: 50,
          data: {
            comicName: this.comicInfo.comicName,
            // "chapterNumber":1
          },
        },
      }).then((res) => {
        if (res.code == 200) {
          console.log(res.data);
          this.chapterList = res.data;
        }
      });
    },
    see(item) {
      this.$router.push({
        path: "read",
        query: {
          name: this.comicInfo.comicName,
          chapterNumber: item.chapterNumber,
        },
      });
    },
    getComicComment() {
      request({
        url: "comment/getComicComment",
        method: "post",
        isFile: true,
        data: {
          id: this.$route.query.id,
          column: "time",
        },
      }).then((res) => {
        if (res.code == 200) {
          this.commentList = res.data;
          console.log(res.data);
        }
      });
    },
    addComicComment() {
      if (!this.textarea) {
        return ElMessage.info("不能评论为空！");
      }
      request({
        url: "comment/addComment",
        method: "post",
        data: {
          username: this.form.username,
          name: this.form.name,
          comicId: this.$route.query.id,
          parentId: 0,
          avatar: this.form.avatar,
          detail: this.textarea,
          replyName: "",
          replyId: "",
        },
      }).then((res) => {
        if (res.code == 200) {
          this.getComicComment();
          this.textarea = "";
          ElMessage.success("评论成功");
        }
      });
    },
    addComicCommentReply() {
      if (!this.textareaReply) {
        return ElMessage.info("不能评论为空！");
      }
      request({
        url: "comment/addComment",
        method: "post",
        data: {
          username: this.form.username,
          name: this.form.name,
          comicId: this.$route.query.id,
          parentId: this.selectItem.comment.id,
          avatar: this.form.avatar,
          detail: this.textareaReply,
          replyName: this.selectItem.comment.name,
          replyId: this.selectItem.comment.username,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.getComicComment();
          this.isHuiFu = false;
          this.textareaReply = "";
          ElMessage.success("评论成功");
        }
      });
    },
    deleteComment(id) {
      request({
        url: "comment/deleteComment",
        method: "post",
        data: {
          id: id,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.getComicComment();
          ElMessage.success("删除评论成功");
        }
      });
    },
    reply(item, itemChild) {
      if (!itemChild) {
        this.isHuiFu = true;
        this.selectItem = item;
      } else {
        this.isHuiFu = true;

        this.selectItem = {
          child: [],
          comment: { ...itemChild, id: item.comment.id },
        };
      }
    },
    getListHome() {
      request({
        url: "comic/getMain",
        method: "post",
      }).then((res) => {
        if (res.code == 200) {
          this.homeList = [res.data["热门推荐"][0], res.data["热门推荐"][1]];
        } else {
        }
      });
    },
    pushDetail(item) {
      this.$router.push({
        path: "read",
        query: { name: item.name, chapterNumber: 1 },
      });
    },
  },
  mounted() {
    this.getComicInfo().then(() => {
      this.getZJ();
      this.getComicComment();
    });
    this.getListHome();
  },
  setup() {},
};
</script>
<style scoped>
::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
.center_fixed {
  position: fixed;
  left: 50%;
  bottom: 0;
  width: 100vw;
  transform: translateX(-50%);
}
.main {
  padding-top: 75px;
  /* display: flex; */
  width: 1100px;
  /* height: 100vh; */
  /* padding: 55px 55px 270px 270px; */
  /* background-color: brown; */
}

.leftside {
  width: 150px;
  /* background-color: aqua; */
}

.leftside div {
  width: 150px;
  height: 45px;
  text-align: center;
  justify-content: center;
  line-height: 45px;
  transition: all 0.2s;
  cursor: pointer;
}
.leftside div:hover {
  background-color: lightblue;
  color: white;
}
.leftside div.is-focus {
  background-color: lightblue;
  color: white;
}
.inner {
  /* background-color: blueviolet; */
  /* width: 860px; */
}
</style>
<style scoped>
.book-card {
  width: 150px;
  height: 200px;
}
</style>
